<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }



        #result {
            padding: 7px 10px;
            position: fixed;
            top: 10px;
            left: 20px;
            width: 300px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }

        #cityName {
            width: 170px;
            margin-right: 10px;
            height: 25px;
            border: 1px solid rgba(27, 142, 236, 0.5);
            border-radius: 5px;
        }

        #result button {
            border: 1px solid rgba(27, 142, 236, 0.5);
            border-radius: 5px;
            background: rgba(27, 142, 236, 0.5);
            color: #fff
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Tww5A6wFmETHVvoC3ImZBdaIL2I6izCG">
    </script>
    <title>map</title>
</head>

<body>
    <div id="allmap"></div>

    <div id='result'>
        城市名: <input id="cityName" type="text" />
        <button onclick="theLocation()" />查询</button>
    </div>
</body>

</html>
<script type="text/javascript">
    //创建地图，设置鼠标滚轮放大缩小
    var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(115.51844963752126, 24.770341236448544);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var geolocation = new BMapGL.Geolocation();






    //点击哪里获取哪里胡经纬度
    map.addEventListener('click', function (e) {
        alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);



    });



    // 获取每个地方的镂空面，并用深颜色绘制它
    var bd = new BMapGL.Boundary();
    bd.get('寻乌县', function (rs) {
        // console.log('外轮廓：', rs.boundaries[0]);
        // console.log('内镂空：', rs.boundaries[1]);
        var hole = new BMapGL.Polygon(rs.boundaries, {
            fillColor: 'blue',
            fillOpacity: 0.2
        });
        map.addOverlay(hole);
    });





    // 地图上添加搜索功能
    function theLocation() {
        var city = document.getElementById("cityName").value;
        if (city != "") {
            map.centerAndZoom(city, 15); // 用城市名设置地图中心点
        }
    }
</script>